<!--组件-参数-->
<template>
  <div>

    <div class="row acenter">
      <text class="font28 text2">{{title}}</text>
      <div class="width8"></div>
      <LImage class="explain" v-if="explain && explain.length" :src="Config.img('wenhao.png')" @click="explainClick()"></LImage>
    </div>


    <div class="buts">
      <template v-for="(item, index) in types">
        <div class="width30" v-bind:key="'width'+index" v-if="index > 0" ></div>
        <div :class="['but', value == index ? 'main1' : 'bg2']" v-bind:key="'but'+index" @click="typeClick(index)">
          <text :class="['font28' , value == index ? 'text1' : 'text2']">{{item}}</text>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

//功能
import modal from "@/_js/modal";
import Config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");


export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    
    value: { //值
      type:String,
      default:'',
    },

    isEdit: { //turn可编辑
      type:Boolean,
      default:true,
    },

    types:{ //类型
      type:Array,
      default:undefined,
    },

    title: { //标题
      type:String,
      default:undefined,
    },

    explain: { //说明
      type:String,
      default:undefined,
    },
  },

  data() {
    return {   
      Config:Config,
    };
  },

  mounted(){
  },

  methods:{

    /********************************************** 点击触发*/
    //说明点击
    explainClick() {
      var parm = {'message':this.explain};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },

    //类型点击
    typeClick(index) {

      if (this.value == index || !this.isEdit) {
        return;
      }
      this.value = index;
      this.$emit("change", index);
      this.$emit("typeChange", index);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.explain{
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.buts {
  flex-direction: row;
  margin-top: 40px;
}
.but {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 76px;
  border-radius: 16px;
}


/*************** 宽高*/
.width8{
  width: 8px;
}
.width30 {
  width: 30px;
}
</style>
